<template>
  <div>
    <el-row :gutter="10">
      <el-col v-for="(item,index) in formData" :key="index" :span="24" class="flex item">
        <div class="label">{{ labelText(item[0]) }}</div>
        <div v-if="item[0] === 'imgUrl'" class="flex-1 value">
          <el-image
            class="img"
            :src="item[1]"
            :preview-src-list="[item[1]]"
          >
          </el-image>
        </div>
        <div v-else class="flex-1 value" v-html="item[1]">
          {{ item[1] }}
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    dialogConfig: {
      type: Object,
      default () {
        return {
          show: false,
          title: '标题',
          width: '50%',
          data: {}
        }
      }
    }
  },
  data () {
    return {
      formData: []
    }
  },
  computed: {
    labelText () {
      return (key) => {
        return {
          type: '类型',
          title: '标题：',
          content: '内容：'
        }[key]
      }
    }
  },
  watch: {
    'dialogConfig.show': {
      handler(newVal, oldVal) {
        if (newVal) {
          this.init()
        }
      },
      immediate: true
    }
  },
  methods: {
    init () {
      const { type, title, content } = this.dialogConfig.data
      const data = Object.entries({
        type: type === 1 ? '隐私政策' : '用户协议', title, content
      })
      this.formData = data
    }
  }
}
</script>

<style lang="scss" scoped>
.item{
  line-height: 22px;
  .label{
    width: 90px;
    font-size: 14px;
    font-weight: 400;
    color: #666666
  }
  .value{
    .img{
      width: 110px;
      height: 110px;
    }
    font-size: 14px;
    font-weight: 350;
    line-height: 22px;
    color: #222222
  }
}
.item {
  margin: 20px 0 0px 0
}
</style>

